<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back"></i>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">合同审批</h1>
      <div class="mint-header-button is-right"></div>
    </header>

    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:10px 10px;background:#fff">
      <picker :picdata="level" class="rd_picker" pictitle="合同种类:" @getpicval="getpicval" />
      <mt-field v-model="contractData.contracttitle" label="合同名称:" placeholder="请输入合同名称" />
      <mt-field v-model="contractData.contractnumber" label="合同编号:" placeholder="请输入合同编号" />
      <pickerdatetime :picdata="level" :values="''" :pictitle="'合同签约时间'" :gettime.sync="contractData.contractdate" />
      <mt-field v-model="contractData.contractamount" label="合同总金额:" placeholder="请输入合同总金额" />
      <mt-field style="border-bottom:1px solid #ddd;" v-model="contractData.contractpeople" label="我方签约人:" placeholder="请输入我方签约人" />
      <div style="text-align:center;margin:10px 0;border-bottom:1px solid #ddd;">
        <textarea v-model="contractData.contractdes" style="border: 0;padding:0 10px; outline: none;width:100%;height:120px;" placeholder="合同简介" rows="3" />
        </div>
        <div style="text-align:center;margin:10px 0;border-bottom:1px solid #ddd;">
        <textarea v-model="contractData.beizhu" style="border: 0;padding:0 10px; outline: none;width:100%;height:120px;" placeholder="备注" rows="3" />
        </div>
      <div style="margin:20px 10px;padding-top:10px;margin-left:5px;">
        <span style="display:block;height:30px">上传附件：</span>
        <div style="width:100%;display:flex;flex-wrap:wrap;">
          <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
            <uploadpic :imagefile.sync="filearr1[index]" />
          </div>
        </div>
      </div>
     <chouseperson :atypeid="'0107'" :num="num" @getspl="getspl" />
    </div>
    <div class="btn_f">
      <mt-button type="default" style="width:100px;margin-right:15px" @click="goback">取消</mt-button>
      <mt-button type="primary" style="width:100px" @click="submitmoney">确定</mt-button>
    </div>

  </div>
</template>
<script>
import pickerdatetime from '~/components/pickerdatetime.vue'
import nheader from '~/components/nheader.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
import picker from '~/components/picker.vue'
export default {
  components: {
    nheader,
    uploadpic,
    chouseperson,
    chousebumen,
    picker,
    pickerdatetime
  },
  data () {
    return {
      ts: this.newStore(),
      handler: function (e) {
        e.preventDefault()
      },
      chouseval: '',
      startDate: new Date(),
      popupVisible22: false,
      chousname: [],
      grantime: '',
      aid: '',
      filename: {
        name: '点我上传'
      },
      level: [
        { showname: '业务合同', showid: '业务合同' },
        { showname: '其他合同', showid: '其他合同' },
      ],
      contractData: {
        contracttitle: '',
        contracttype: '',
        contractnumber: '',
        contractdes: '',
        contractdate: '',
        contractpeople: '',
        contractamount: '',
        beizhu: '',
        aid: ''
      },
      firstarr: [],
      usedetail: '',
      filearr1: [{}, {}, {}, {}, {}],
      shenpi: '',
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      htitle: '合同审批',
      num: 1
    }
  },
  mounted () {
  },
  computed: {
  },
  methods: {
    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    closeTouch () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })//阻止默认事件
    },
    openTouch () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false })//打开默认事件
    },
    closepicker (val) {
      if (val) {
        this.closeTouch()
      } else {
        this.openTouch()
      }
    },
    getspl (val) {
      this.aid = val.id
    },
    submitmoney () {

      if (
        this.contractData.contracttype == '' ||
        this.contractData.contracttype == undefined
      ) {
        this.$messagebox('提示', '请选择合同类型')
        return
      }
      if (
        this.contractData.contracttitle == '' ||
        this.contractData.contracttitle == undefined
      ) {
        this.$messagebox('提示', '输入合同名称')
        return
      }
      if (
        this.contractData.contractnumber == '' ||
        this.contractData.contractnumber == undefined
      ) {
        this.$messagebox('提示', '请输入合同编号')
        return
      }
      if (this.contractData.contractdate == '' || this.contractData.contractdate == undefined) {
        this.$messagebox('提示', '请输入签约日期')
        return
      }
      if (this.contractData.contractamount == '' || this.contractData.contractamount == undefined) {
        this.$messagebox('提示', '请输入合同总金额')
        return
      }
      if (this.contractData.contractpeople == '' || this.contractData.contractpeople == undefined) {
        this.$messagebox('提示', '请输入我方签约人')
        return
      }
      if (this.contractData.contractdes == '' || this.contractData.contractdes == undefined) {
        this.$messagebox('提示', '请输入合同简介')
        return
      }
      this.$messagebox
        .confirm('确认提交合同审批?')
        .then(() => {
          const req = {
            handle: '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
            atype: '0107',
            flowid: this.aid
          }
          this.spost(this.ts, '/mainservlet', req).then(ts => {
            const req1 = {
              handle: '09D3B9E20F101E11CD5ED14F3DA05EF7E5F8A7980C727D360C5596A61637D2F64B73C71EED1C1BDA88D6D925C779BA4C',
              aid: ts.d.data.operation3[0].hash.approvalid,
              contractdes: this.contractData.contractdes,
              beizhu: this.contractData.beizhu,
              contracttitle: this.contractData.contracttitle,
              contracttype: this.contractData.contracttype,
              contractnumber: this.contractData.contractnumber,
              contractdate: this.contractData.contractdate,
              contractpeople: this.contractData.contractpeople,
              contractamount: this.contractData.contractamount,
              fileurl: this.posturl(this.filearr1),
              filename: this.postname(this.filearr1)
            }
            this.spost(this.ts, '/mainservlet', req1).then(() => {
              this.$messagebox('提示', '发起合同审批成功！')
              this.$router.push({ name: 'jbrhome', query: { name: '' } })
            })

          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    option () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },

    getpicval (val) {
      console.log(val)
      this.contractData.contracttype = val.showid
    },

  }
}
</script>
<style scoped>
.mint-field-core {
  text-align: right;
}
.timeright {
  display: inline-block;
  float: right;
}
.timeitem {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.qjtime {
  padding: 0 10px;
  line-height: 25px;
}
.qjcolor {
  color: blue;
  display: inline-block;
  float: right;
}
.sbdata {
  margin: 10px;
  line-height: 25px;
}
.delright {
  float: right;
  color: red;
  padding-left: 5px;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
</style>
